<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="./three.js"></script>
    <script src="./OrbitControls.js"></script>
    <script src="./1/stats.min.js"></script>
    <script src="./OBJLoader.js"></script>
    <script src="./MTLLoader.js"></script>
    <script src="./DDSLoader.js"></script>

    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
    <script>
        var renderer;
        function initThree() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias : true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF, 1.0);
        }

        var camera;
        var lookAtObj = {
            x : 0,
            y : 0,
            z : 0
        };

        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            //camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 600;
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;
            camera.lookAt(lookAtObj);
        }

        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }

        var light;
        var lightPosition = {x:0,y:0,z:0};
        var lightStatus = false;

        function initLight() {
             light = new THREE.AmbientLight('#ffffff',1);
             light.castShadow = true;
             light.position.set(100, 100, 200);
             scene.add(light);
        }

        var orbit;
        function initOrbit() {
            orbit = new THREE.OrbitControls(camera);
        }

        var objLoader;
        function initObj() {
            objLoader = new THREE.MTLLoader()
                .setPath('./1/52b584e0b58e1/')
                .load( 'Angemon.mtl', function ( materials ) {
                    materials.preload();
                    new THREE.OBJLoader()
                        .setMaterials( materials )
                        .setPath( './1/52b584e0b58e1/' )
                        .load( 'Angemon.obj', function ( object ) {

                            object.scale.x=50;
                            object.scale.y=50;
                            object.scale.z=50;
                            object.position.y = 27;

                            scene.add( object );
                        });
                });
        }

        var skybox,geometry,material;
        function initSkyBox(){
            scene.background = new THREE.CubeTextureLoader()
                .setPath( './images/' )
                .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );

            geometry = new THREE.SphereBufferGeometry( 37, 32, 16 );
            material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
        }

        function initObject() {
            //var geometry = new THREE.CylinderGeometry( 50,50,50);
            //var material = new THREE.MeshLambertMaterial( { color:'#ADFF2F'} );
            var mesh = new THREE.Mesh( geometry,material);
            //mesh.position = new THREE.Vector3(0,0,0);
            scene.add(mesh);
        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initSkyBox();
            initLight();
            initObject();
            initOrbit();
            initObj();
            animation();
        }

        function animation()
        {
            changeFov();

            light.position.set(lightPosition.x, lightPosition.y,lightPosition.z);
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        function setCameraFov(fov)
        {
            camera.fov = fov;
            camera.updateProjectionMatrix();
        }

        function changeFov()
        {
            var txtFov = document.getElementById("txtFov").value;
            var val = parseFloat(txtFov);
            setCameraFov(val);
        }
    </script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
<div>
    Fov:<input type="text" value="45" id="txtFov"/>(0到180的值)
</div>
</body>
</html>
